<template>
  <transition name="dialog">
    <div class='modal-wrapper' v-show='dialogVisible' @click.self='handleClose' @mousewheel.prevent>
      <div class="default-dialog" @mousewheel.passive.stop>
        <div class="header">
          <div class="title">视频预览</div>
          <button type="button" class="close-btn" aria-label='close' @click='handleClose'></button>
        </div>
        <div class='modal-body'>
          <div style="width:100%;height: 500px;">
            <video v-if="dialogVisible" style="width: 100%; height: 100%;object-fit: contain;background-color: #000;"
              :src="previewUrl" controls></video>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import ElDialog2 from "element-ui/packages/dialog/src/component";
export default {
  data() {
    return {
      dialogVisible: false,
      previewUrl: '',
    };
  },
  components: {
    ElDialog2
  },
  methods: {
    handleClose() {
      this.dialogVisible = false;
    }
  }
};
</script>
<style lang="scss" scoped>
.modal-wrapper {
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 99999;

  .default-dialog {
    position: absolute;
    border-radius: 5px;
    color: #303952;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 700px;
    border-radius: 10px;
    background-color: #fff;

    .modal-body {
      position: relative;
      padding: 0 20px 30px;
      box-sizing: border-box;


    }

    .header {
      padding: 20px 20px 10px;

      .title {
        line-height: 24px;
        font-size: 18px;
        color: #303133;
      }

      .close-btn {
        position: absolute;
        right: 20px;
        top: 30px;
        background-color: transparent;
        border-color: transparent;
        padding: 0;
        outline: none;
        cursor: pointer;
        text-align: center;
        z-index: 1;
        font-size: 0px;
        display: block;
        box-sizing: content-box;

        &::after {
          content: '';
          width: 14px;
          height: 1px;
          background: gray;
          display: block;
          transition: all .25s ease-in-out;
        }

        &::before {
          content: '';
          width: 14px;
          height: 1px;
          background: gray;
          display: block;
          transition: all .25s ease-in-out;
        }

        &::before {
          transform: rotate(45deg);
        }

        &::after {
          transform: translateY(-1px) rotate(-45deg);
        }

        &:hover::before,
        &:hover::after {
          background: rgb(67, 67, 67);
        }
      }
    }

  }
}

/* 过渡动画 */
.dialog-enter-active,
.dialog-leave-active {
  transition: all 0.25s ease;
}

.dialog-enter-from,
.dialog-leave-to {
  opacity: 0;
}
</style>